<style lang="scss">
	.main {
		padding: 10rpx 30rpx;
	}
	
	// 1.0 输入框
	.main-search {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		.left {
			width: calc(100% - 120rpx);
			position: relative;
			.inp {
				width: 100%;
				height: 80rpx;
				border: 1px solid #459CFF;
				padding-left: 20rpx;
				box-sizing: border-box;
			}
			.img {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 10rpx;
				top: 20rpx;
			}
		}
		.right {
			width: 120rpx;
			.btn {
				width: 120rpx;
				padding: 0;
				margin: 0;
				color: #49A0FF;
				background-color: transparent;
				&:after {
					border: 0;
				}
			}
		}
	}
	
	// 2.0 渲染天气信息
	.main-content {
		width: 100%;
		.city {
			height: 100rpx;
			line-height: 100rpx;
		}
		.info {
			width: 100%;
			text-align: center;
			.opt {
				padding: 20rpx 10rpx;
			}
		}
		.msg {
			padding: 50rpx 0;
			text-align: center;
			color: #666;
		}
	}
</style>

<template>
	<view class="main">
		<!-- 1.0 输入框 -->
		<view class="main-search">
			<!-- 1.1 左边 -->
			<view class="left">
				<!-- v-model="city"  数据双向绑定  (视图 + 数据) -->
				<input class="inp" type="text" placeholder="请输入城市" v-model="city">
				
				<image class="img" 
					src="../../static/i_delete.png" 
					mode="widthFix" 
					@click="removeInputValue"></image>
			</view>
			<!-- 1.2 右边 -->
			<view class="right">
				<!-- @click="addInputValue" 事件绑定 -->
				<button class="btn" @click="addInputValue">查询</button>
			</view>
		</view>
		
		
		<!-- 2.0 渲染天气信息 -->
		<view class="main-content">
			<view class="city">省份城市: <text>{{ info.province }}</text> <text>{{ info.city }}</text></view>
			
			<view class="info" v-if="isShow">
				<view class="opt">{{ info.weather }} </view>
				<view class="opt">温度: {{ info.temperature }}</view>
				<view class="opt">风力: {{ info.windpower }}</view>
				<view class="opt">风向: {{ info.winddirection }}</view>
				<view class="opt">发布时间: {{ info.reporttime }}</view>
			</view>
			<view class="msg" v-else>
				暂无查询结果~~
			</view>
		</view>
	</view>
</template>

<script setup>
	// 导入ref函数
	import { reactive, ref } from 'vue';
	
	// 导入天气查询的API
	import { getWeatherInfo } from '../../api/index.js'
		
	// 定义布尔值 记录是否有查询结果
	 let isShow = ref(false)
	// 定义变量  记录输入框的值
	let city = ref("");
	// 定义对象 记录天气信息
	let info = reactive({})
	
	// 查询天气的函数
	const searchWeather = async (value)=> {
		//加载提示
		uni.showLoading({
			title:"正在查询.."
		})
		await getWeatherInfo({city: value})
		.then(
			content=> {
				console.log("响应的数据:",content)
				let data = content.data;
				let result = data.result;
				let status = result.status;
				if(status == "1") {
					//有查询结果
					isShow.value = true;
					// 解剖天气数据
					let obj = result.lives[0];
					// 给info对象赋值
					info.province = obj.province;
					info.city = obj.city;
					info.adcode = obj.adcode;
					info.weather = obj.weather;
					info.temperature = obj.temperature;
					info.winddirection = obj.winddirection;
					info.windpower = obj.windpower;
					info.humidity = obj.humidity;
					info.reporttime = obj.reporttime;
					info.temperature_float = obj.temperature_float;
					info.humidity_float = obj.humidity_float;
		
		
					
				}
				else if(status == "0") {
					//没有查询结果
					isShow.value = false;
				}
			},
			err=> {
				console.log("请求失败",err)
			}
		)
	
		// 隐藏加载提示
		uni.hideLoading();
	}
	
	// 定义方法 获取输入框的值
	const addInputValue = async ()=> {
		console.log("输入框的值:",city.value)
		// 弹出提示
		if(city.value == "") {
			uni.showToast({
				title: "输入框不能为空~~",
				icon: 'error'
			})
		}
		else {
			// 调用查询天气的函数
			searchWeather(city.value);
		}
	}
	
	// 定义方法  清除输入框的值
	const removeInputValue = ()=> {
		city.value = "";
	}
	
	// 初始化
	// 调用查询天气的函数
	searchWeather("贵阳");
</script>
